<template>
		<view>
			<view style="height:500upx;width:100%">
				<mpvue-echarts @onInit="echartsInit1" canvasId="line" ref="lineChart" />
			</view>
			 <image src="../../static/images/timg.jpg" mode=""></image>
		</view>
</template>
<script>
	import echarts from '../../static/js/echartsComponents/echarts/echarts.min.dingzhi_simple.js';
	import mpvueEcharts from '../../static/js/echartsComponents/mpvue-echarts/src/echarts.vue';
	export default {
		data(){
			return {
			}
		},
		onLoad() {
			console.log(echarts,'echarts')
		},
		components: {
			mpvueEcharts
		},
		methods:{
			echartsInit1(e){
				let WHData = e;
				let obj = {
					data1:[111, 55, 44, 33, 22, 11],
					data2:[11, 22, 33, 44, 55, 66]
				}
				let node = this.$refs.lineChart;
				let canvas = node.canvas;
				echarts.setCanvasCreator(() => canvas);
				let myChart = echarts.init(canvas, null, {
					width: WHData.width,
					height: WHData.height
				});
				canvas.setChart(myChart);
				myChart.setOption(this.lineOption(obj));
				node.setChart(myChart);
				myChart.on('click', function (params) {
						// 控制台打印数据的名称
						// console.log('1111',params);
				});
			},
			lineOption(obj){
				let lineOption = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						// position:["50%","50%"],
						// formatter:function(){
						// 	return '<view style="color:red">11111</view>'
						// }
					},
					dataZoom:[
					{
						start: 30,  //数据窗口范围的起始百分比,表示30%
						  end: 70
					}
					],
					legend: {
						data: ['2011年', '2012年']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'value',
						boundaryGap: [0, 0.01]
					},
					yAxis: {
						type: 'category',
						data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
					},
					series: [
						{
							name: '2011年',
							type: 'bar',
							data: obj.data1
						},
						{
							name: '2012年',
							type: 'bar',
							data: obj.data2
						}
					]
				};
				return lineOption;
			}
		}
	}
</script>

<style>
	
</style>


